/*
  学习目标：使用React中的props校验
 
 
*/
import React from 'react';
// 1. 导包，提供类型
import PropTypes from 'prop-types';

export default function App() {
  return (
    <div>
      <Child
        // 3. 指定props，触发报错
        title="昨天是圣诞节"
        count={123}
        isShow={true}
        fn={() => {}}
        child={<TestReactComponent />}
        obj={{ color: '123', fontSize: 18 }}
      ></Child>
    </div>
  );
}

// function TestReactComponent(params) {
//   return null;
// }

class TestReactComponent extends React.Component {
  render() {
    return null;
  }
}

class Child extends React.Component {
  static propTypes = {
    title: PropTypes.number.isRequired,
    // 数字
    count: PropTypes.number,
    // 布尔值
    isShow: PropTypes.bool,
    // 函数
    fn: PropTypes.func,
    // React元素: JSX React组件都是React元素
    child: PropTypes.element,
    obj: PropTypes.shape({
      color: PropTypes.string.isRequired,
      fontSize: PropTypes.number.isRequired,
    }),
  };

  render() {
    const { title } = this.props;
    return <h1>{title}</h1>;
  }
}

// // 2. 指定组件props的校验规则
// Child.propTypes = {
//   title: PropTypes.string.isRequired,
//   // 数字
//   count: PropTypes.number,
//   // 布尔值
//   isShow: PropTypes.bool,
//   // 函数
//   fn: PropTypes.func,
//   // React元素: JSX React组件都是React元素
//   child: PropTypes.element,
//   obj: PropTypes.shape({
//     color: PropTypes.string.isRequired,
//     fontSize: PropTypes.number.isRequired,
//   }),
// };
